<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="static/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="static/bootstrap/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" href="static/easyui/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="static/easyui/themes/icon.css">
<link rel="stylesheet" href="static/css/style.css" />
<link rel="stylesheet" href="static/css/tcommon.css" />
<script src="static/jquery/jquery-1.12.4.js"></script>
<script src="static/bootstrap/js/bootstrap.js"></script>
<script src="static/easyui/jquery.easyui.min.js"></script>
<script src="static/easyui/locale/easyui-lang-zh_CN.js"></script>

<script src="static/excel/jquery.table2excel.js"></script>
<title>日记账</title>
<style>
.salary{padding: 0 10px;}
.salary span{color: #19BF76;}
.table{border:1px solid #eee;font-size:12px;}
.table thead{background: #CEE7FB;}
.table thead tr th{border-right: 1px solid #fff;border-bottom:1px;}
.table thead tr th:last-child{border-right: 0;}
.table-striped>tbody>tr:nth-of-type(odd){background: #fff;}
.table-striped>tbody>tr:nth-of-type(even){background: #f5f5f5;}
.row-fluid {
    overflow: hidden;
}
.span12 {
    overflow-x: scroll;
}
</style>
</head>

<body>
<div class="panel-header">
<div class="panel-title">日记账</div>
<div class="panel-tool">
</div>
</div>
	<div class="search-container" style="padding:0 10px;">
		<div class="search-input">
			项目：
			<input style="min-width: 200px; text-align: center;" id="projectitem" name="projectitem"
				class="easyui-combobox" editable="false"
				data-options="
						    valueField: 'id',
						    textField: 'name',
						    url: 'projectitemuserlist.do',
						    onLoadSuccess:function(data){
						    	if(data.length>0){
						    		$('#projectitem').combobox('setValue',data[0].id);
						    	}
						    },
						    onSelect: function(rec){
						    	projectitemid = rec.id;
						    	projectitemname = rec.name;
						   		loadData();
						    },
						    panelHeight: 'auto'">
		</div>

		<div class="search-input">
			开始日期：
			<input id="startdate" class="easyui-datebox" editable="false">
		</div>

		<div class="search-input">
			结束日期：
			<input id="enddate" class="easyui-datebox" editable="false">
		</div>
		<div class="search-input">
			<a href="#" class="easyui-linkbutton" iconCls="icon-search" id="search">搜索</a>
		</div>
		<div class="search-input">
       		<a href="javascript:;" class="easyui-linkbutton" onclick="Export();">导出Excel</a>
		</div>
	</div>
	<div style="padding:0 10px;">
		<h3 class="salary">
			<span>项目总预算：</span>
			<span id="budgetMain"></span>
		</h3>
	</div>
	<div class="container-fluid">
		<div class="row-fluid">
			<div class="span12">
				<table class="table  table-striped table-bordered" style="margin-top: 10px;" id="pro_table">
					<thead id="theader">
					</thead>
					<tbody id="tbodyer">
					</tbody>
				</table>
			</div>
		</div>
	</div>
</body>
<script th:inline="javascript">
	var projectitemid = 0;
	var projectitemname;
	var budgetmain = {};
	var fromDate = getLastMonth().last;
	var toDate = getLastMonth().now;
	
	$(document).ready(function() {
		$("#startdate").datebox('setValue', fromDate);
		$("#enddate").datebox('setValue', toDate);
		loadtableheader()
	})
	
	function Export(){　　　　
		$("#pro_table").table2excel({
			excludes:".noExl",
			name : "日记账-"+projectitemname,
			filename : "日记账-"+projectitemname+"-"+formatDate(new Date())+".xls",
			bootstrap:false
		});
	}
	
	function loadtableheader() {
		$.ajax({
			type : 'GET',
			url : "budgetitem",
			contentType : "application/json",
			success : function(data) {
				var html = "<tr><th style='width:90px;'>日期</th>";
				$.each(data.rows, function(i,val) {
					html += "<th style='width:auto;white-space:nowrap'>" + val.content + "</th>"
				})
				html += "<th style='width:auto;white-space:nowrap'>合计</th><th style='width:auto;white-space:nowrap'>结余</th></tr>"
				$("#theader").empty().append(html);
				loadData()
			}
		})
	}
	/* function loadbudgetmain() {
		$.ajax({
			type : 'POST',
			url : "loadbudgetmain.do?projectitemid=" + projectitemid,
			contentType : "application/json",
			success : function(data) {
				budgetmain = data;
				$('#budgetMain').html(budgetmain.money+" ¥");
			}
		})
	} */
	function loadData() {
		$.ajax({
			type : 'POST',
			async:false, 
			url : "loadbudgetmain.do?projectitemid=" + projectitemid,
			contentType : "application/json",
			success : function(data) {
				budgetmain = data;
				$('#budgetMain').html(budgetmain.money+" ¥");
			}
		})
		$.ajax({
			type : 'GET',
			async : false, 
			url : "dailyfinace.do?projectitemid=" + projectitemid + "&fromdate=" + fromDate + "&todate=" + toDate,
			contentType : "application/json",
			success : function(data) {
				$('#table').find('tr').remove();
				$('#tbodyer').empty();
				var surplus = Number(budgetmain.money);
				$.each(data.info, function(i,row) {
					var sum = 0;
					var tr = "<tr><td style='width:auto;white-space:nowrap;'>" + row.date + "</td>"
					$.each(row.list, function(j,cell) {
						tr += "<td>" + cell.money + "</td>"
						sum += cell.money;
					})
					if (sum > 0){
						surplus -= sum;
						tr += "<td>" + sum + "</td><td>"+surplus+"</td></tr>"
						$('#tbodyer').append(tr);
					}
				})
			},
			dataType : "json"
		});
	}
	$("#search").click(function() {
		fromDate = $("#startdate").datebox('getValue');
		toDate = $("#enddate").datebox('getValue');
		loadData();
	});
	function formatDate(time) {
		var date = new Date(time);
		var year = date.getFullYear(),month = date.getMonth() + 1, //月份是从0开始的
		day = date.getDate(),hour = date.getHours(),min = date.getMinutes(),sec = date.getSeconds();
		var newTime = year + '-' + month + '-' + day;
		return newTime;
	}
	function getLastMonth() {
		var now = new Date();
		var year = now.getFullYear();
		var month = now.getMonth() + 1;//0-11表示1-12月
		var day = now.getDate() + 1;
		var dateObj = {};
		dateObj.now = year + '-' + month + '-' + day;
		var nowMonthDay = new Date(year, month, 0).getDate(); //当前月的总天数
		if (month - 1 <= 0){ //如果是1月，年数往前推一年<br>　　　　 
			dateObj.last = (year - 1) + '-' + 12 + '-' + day;
		}else{
			var lastMonthDay = new Date(year, (parseInt(month) - 1), 0).getDate();
			if (lastMonthDay < day){ //1个月前所在月的总天数小于现在的天日期
				if (day < nowMonthDay){ //当前天日期小于当前月总天数
					dateObj.last = year + '-' + (month - 1) + '-' + (lastMonthDay - (nowMonthDay - day));
				}else{
					dateObj.last = year + '-' + (month - 1) + '-' + lastMonthDay;
				}
			}else{
				dateObj.last = year + '-' + (month - 1) + '-' + day;
			}
		}
		return dateObj;
	}
</script>
<style>
.table th, .table td {
	text-align: center;
	vertical-align: middle !important;
}

.modal-backdrop {
	z-index: 0;
}
</style>

</html>